<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>leaflet.migrationLayer插件的使用</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
    integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />

  <style>
    html,
    body {
      margin: 0;
      padding: 0;
    }

    #map {
      position: absolute;
      height: 100%;
      width: 100%;
    }

    #event {
      position: absolute;
      top: 50px;
      right: 600px;
      height: 100px;
      width: 400px;
      z-index: 10000;
    }

    .btn {
      border-color: gray;
      border-width: 2px;
      background-color: white;
    }
  </style>

</head>

<body>
  <div id="map"></div>
  <div id='event'>
    <input type="button" value="setData" class="btn" onclick="setData()">
    <input type="button" value="hide" class="btn" onclick="hide()">
    <input type="button" value="show" class="btn" onclick="show()">
    <input type="button" value="pause" class="btn" onclick="pause()">
    <input type="button" value="play" class="btn" onclick="play()">
    <input type="button" value="destroy" class="btn" onclick="destroy()">
  </div>

  <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
    integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>
  <script src='./js/leaflet.migrationLayer.js'></script>

  <script>
    var lrmap = L.map('map').setView([35, -95], 5);
    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(lrmap);

    var data = [
      {
        "from": [-118.2705, 33.9984],
        "to": [-122.789336, 37.920458],
        "labels": ["Los Angeles", "San Francisco"],
        "color": "#ff3a31"
      },
      {
        "from": [-118.2705, 33.9984],
        "to": [-80.247887, 25.792296],
        "labels": [null, "Miami"],
        "color": "#ff7e2b"
      },
      {
        "from": [-118.2705, 33.9984],
        "to": [-73.999705, 40.795047],
        "labels": [null, "New York"],
        "color": "#ffc726"
      },
      {
        "from": [-118.2705, 33.9984],
        "to": [-87.724088, 41.917846],
        "labels": [null, "Chicago"],
        "color": "#e9ff20"
      },
      {
        "from": [-118.2705, 33.9984],
        "to": [-92.145189, 46.77372],
        "labels": [null, "Duluth"],
        "color": "#99ff1b"
      },
      {
        "from": [-118.2705, 33.9984],
        "to": [-111.824547, 40.788055],
        "labels": [null, "Salt Lake"],
        "color": "#45ff15"
      },
      {
        "from": [-118.2705, 33.9984],
        "to": [-111.364615, 47.536109],
        "labels": [null, "Great Falls"],
        "color": "#10ff33"
      },
      {
        "from": [-118.2705, 33.9984],
        "to": [-97.585039, 35.511099],
        "labels": [null, "Oklahoma"],
        "color": "#0aff84"
      },
      {
        "from": [-118.2705, 33.9984],
        "to": [-115.157907, 36.173032],
        "labels": [null, "Las Vegas"],
        "color": "#05ffd9"
      },
      {
        "from": [-118.2705, 33.9984],
        "to": [-103.196215, 34.418753],
        "labels": [null, "Clovis"],
        "color": "#00ccff"
      }
    ];

    var data2 = [
      {
        "from": [-73.875523, 40.781063],
        "to": [-80.247887, 25.792296],
        "labels": ["New York", "Maima"],
        "color": "#05ffd9"
      },
      {
        "from": [-73.875523, 40.781063],
        "to": [-118.2705, 33.9984],
        "labels": [null, "Los Angeles"],
        "color": "#00ccff"
      },
      {
        "from": [-73.875523, 40.781063],
        "to": [-87.724088, 41.917846],
        "labels": [null, "Chicago"],
        "color": "#ffc726"
      },
      {
        "from": [-73.875523, 40.781063],
        "to": [-71.058437, 42.35902],
        "labels": [null, "Boston"],
        "color": "#e9ff20"
      },
      {
        "from": [-73.875523, 40.781063],
        "to": [-75.683057, 45.42172],
        "labels": [null, "Ottawa"],
        "color": "#99ff1b"
      }];

    data = data.map(item => { return { ...item, value: parseInt(Math.random() * 20) } });
    data2 = data2.map(item => { return { ...item, value: parseInt(Math.random() * 20) } });

    var migrationLayer = new L.migrationLayer({
      map: lrmap,
      data: data,
      pulseRadius: 30,
      pulseBorderWidth: 3,
      arcWidth: 1,
      arcLabel: true,
      arcLabelFont: '10px sans-serif',
      maxWidth: 10
    }
    );
    migrationLayer.addTo(lrmap);

    function setData() {
      migrationLayer.setData(data2);
    }
    function hide() {
      migrationLayer.hide();
    }
    function show() {
      migrationLayer.show();
    }
    function play() {
      migrationLayer.play();
    }
    function pause() {
      migrationLayer.pause();
    }
    function destroy() {
      migrationLayer.destroy();
    }
  </script>
</body>

</html>